<template>
	<view class="uni-file-picker">
		<uni-section title="点击拍照" type="line">
			<view class="uni-file-picker__container" style="margin-left: 2%;">
				<view class="file-picker__box" v-for="(item,index) in imageList" :key="index">
					<view class="file-picker__box-content">
						<image class="file-image" :src="item" mode="aspectFill" @click.stop="prviewImage(item,index)">
						</image>
						<view class="icon-del-box" @click.stop="delFile(index)">
							<view class="icon-del"></view>
							<view class="icon-del rotate"></view>
						</view>
					</view>
				</view>
				<view class="file-picker__box">
					<view class="file-picker__box-content is-add" @click="choose">
						<slot>
							<view class="icon-add"></view>
							<view class="icon-add rotate"></view>
						</slot>
					</view>
				</view>
			</view>
		</uni-section>
		<uni-section title="设备类别" type="line">
			<uni-data-select style="width: 90%; margin-left: 5%;" v-model="value1"
				:localdata="range1"></uni-data-select>
		</uni-section>
		<uni-section title="原因分类" type="line">
			<uni-data-select style="width: 90%; margin-left: 5%;" v-model="value2"
				:localdata="range2"></uni-data-select>
		</uni-section>
		<uni-section title="是否停机" type="line">
			<uni-data-select style="width: 90%; margin-left: 5%;" v-model="value3"
				:localdata="range3"></uni-data-select>
		</uni-section>
		<uni-section title="更换备件" type="line">
			<uni-data-select style="width: 90%; margin-left: 5%;" v-model="value4"
				:localdata="range4"></uni-data-select>
		</uni-section>
		<uni-section title="备件日期" type="line">
			<uni-datetime-picker style="width: 90%; margin-left: 5%;" type="datetime" v-model="datetimesingle" />
		</uni-section>
		<uni-section title="处理方案" type="line">
			<textarea class="textarea-a" v-model="text" rows="5" maxlength="100"></textarea>
			<view style="height: 70px;margin-top: 5%;padding-bottom: 2%;">
				<button class="mini-btn " style="width: 50%; margin-left: 25%;" @click="Task3"
					type="primary">保存</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	import {
		listByParamTask3,
		TypeList
	} from '@/api/system/PhoneTask.js'
	export default {
		data() {
			return {
				text: '', // 初始文本为空
				imageList: [],
				filePath: [],
				range1: [],
				range2: [],
				range3: [{
					text: "是",
					value: '1'
				}, {
					text: "否",
					value: '0'
				}],
				range4: [{
					text: "是",
					value: '1'
				}, {
					text: "否",
					value: '0'
				}],
				task_Id: "",
				isSubmit: false,
				app_id: "",
				value1: "",
				value2: "",
				value3: "0",
				value4: "0",
				datetimesingle: "",
				UPDATE_TIME: "",
				processing_time: "",
				TASk_FAULT: "",
				mato_NAME: "",
				workshop: "",
			}
		},
		onLoad(params) {
			this.filePath = [];
			console.log(JSON.parse(params.parme))
			this.task_Id = JSON.parse(params.parme).task_Id;
			this.app_id = JSON.parse(params.parme).app_id;
			this.UPDATE_TIME = JSON.parse(params.parme).release_time;
			this.processing_time = JSON.parse(params.parme).processing_time;
			this.TASk_FAULT = JSON.parse(params.parme).process_TYPE_NAME1 + " " + JSON.parse(params.parme)
				.process_TYPE_NAME2;
			this.mato_NAME = JSON.parse(params.parme).mato_NAME;
			this.workshop = JSON.parse(params.parme).workshop;
			this.value1 = JSON.parse(params.parme).taskdevicetype;

		},
		created() {
			this.typeListh()
		},
		methods: {
			typeListh() {
				let query = {
					typeFen: 1,
				};
				TypeList(query).then((res) => {
					if (res.code === 200) {
						for (let i = 0; i < res.data.length; i++) {
							let d = {
								text: res.data[i].typeName,
								value: res.data[i].typeCode,
							}
							this.range1.push(d)
						}
					}
				});
				let data = {
					typeFen: 2,
				};
				TypeList(data).then((res) => {
					if (res.code === 200) {
						for (let i = 0; i < res.data.length; i++) {
							let d = {
								text: res.data[i].typeName,
								value: res.data[i].typeCode,
							}
							this.range2.push(d)
						}
					}
				});
			},
			formatDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				const hour = ('0' + date.getHours()).slice(-2);
				const minute = ('0' + date.getMinutes()).slice(-2);
				const second = ('0' + date.getSeconds()).slice(-2);
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			Task3() {
				if (this.value4 === "1" && this.datetimesingle === "") {
					this.$modal.msgError("备件日期为空");
					return;
				}
				this.$modal.loading("保存中，请耐心等待...")
				const baseUrl = config.baseUrl;
				let files = [];
				this.filePath = [];
				let that = this;
				if (this.imageList.length > 0) {
					for (var i = 0; i < this.imageList.length; i++) {
						const path = this.imageList[i];
						const splitArray = path.split("/");
						const substring = splitArray[splitArray.length - 1];
						files.push({
							"name": substring,
							"uri": this.imageList[i],
						})
					}
					// console.log(files,baseUrl)
					const uploadTask = uni.uploadFile({
						url: baseUrl + '/development/v9/SceneAbnormalFeedback/uploadList', //仅为示例，非真实的接口地址
						files: files,
						header: {
							'Authorization': getToken()
						},
						success: (uploadFileRes) => {

							if (JSON.parse(uploadFileRes.data).code == 200) {
								var data = JSON.parse(uploadFileRes.data).msg;
								for (var i = 0; i < JSON.parse(data).length; i++) {
									var file = {
										fileUrl: JSON.parse(data)[i].filePath
									}
									this.filePath.push(file)
								}
								console.log(this.filePath);
								this.save();
							} else {
								this.$modal.closeLoading();
								this.$modal.msgError("保存文件失败");
							}
						},
						fail: (uploadFileRes) => {
							this.$modal.closeLoading();
							this.$modal.msgError("保存失败");
						},
					});
					uploadTask.onProgressUpdate((res) => {
						console.log('上传进度' + res.progress);
					});
				} else {
					this.save();
				}
			},
			save() {
				var task = {
					app_id: this.app_id,
					task_Id: this.task_Id,
					processed_by: this.$store.state.user.name,
					task_code: this.$store.state.user.userAll.userId,
					task_DESC: this.text,
					states: 2,
					value3: this.value3,
					value4: this.value4,
					datetimesingle: this.datetimesingle,
					task_FILE_URL: JSON.stringify(this.filePath),
					task_LAST_DATE: this.formatDate(),
					task_TYPE: this.value2,
					task_DEVICE_TYPE: this.value1,
					UPDATE_TIME: this.UPDATE_TIME,
					Processing_time: this.processing_time,
					task_FAULT: this.TASk_FAULT,
					mato_NAME: this.mato_NAME,
					workshop: this.workshop,
				}
				console.log("Task接收", task)
				listByParamTask3(task).then(res => {
					this.$modal.closeLoading();
					if (res.code == 200) {
						this.filePath = [];
						this.$modal.msgSuccess("关闭成功")
						setTimeout(function() {
							uni.navigateBack({
								delta: 1 // 返回的页面数，如果是1则返回上一页
							});
						}, 1000);
					} else {
						this.$modal.msgSuccess("保存失败")
						this.filePath = [];
						this.$modal.closeLoading();
					}
				}).catch(error => {
					this.filePath = [];
					this.$modal.closeLoading();
					reject(error)
				})
			},
			delFile(indexs) {
				var file = this.imageList;
				this.imageList = file.filter(function(value, index) {
					return index !== indexs; // 返回下标不为2的元素组成的新数组
				});
			},
			prviewImage(img, index) {
				let urls = []
				if (this.disablePreview) return
				this.imageList.forEach(i => {
					urls.push(i)
				})
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
			choose() {
				var camera = plus.camera.getCamera() // 获取camera对象
				var resolution = camera.supportedImageResolutions // 获取字符串数组，摄像头支持的摄像分辨率
				camera.captureImage((res) => {
					console.log(res)
					this.imageList.push(res)
					console.log(this.imageList)
				}, (error) => {
					console.log(error)
				}, {
					resolution: resolution[resolution.length - 1],
					format: "jpg"
				})

			},
		}
	}
</script>

<style>
	.uni-file-picker {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		/* #endif */
		flex: 1;
	}

	.uni-file-picker__container {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-wrap: wrap;
		margin: -5px;
	}

	.file-picker__box {
		background-color: #fff;
		position: relative;
		// flex: 0 0 33.3%;
		width: 33.3%;
		height: 0;
		padding-top: 33.33%;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.textarea-a {
		border: 1px #eee solid;
		width: 90%;
		height: 100px;
		margin-left: 3%;
	}

	.uni-file-picker__container {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-wrap: wrap;
		margin: -5px;
	}

	.file-picker__box {
		position: relative;
		// flex: 0 0 33.3%;
		width: 32%;
		height: 0;
		padding-top: 33.33%;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.file-picker__box-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 4px;
		border: 1px #eee solid;
		border-radius: 5px;
		overflow: hidden;
	}

	.file-picker__progress {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		/* border: 1px red solid; */
		z-index: 2;
	}

	.file-picker__progress-item {
		width: 100%;
	}

	.file-picker__mask {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		color: #fff;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.file-image {
		width: 100%;
		height: 100%;
	}

	.is-add {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.icon-add {
		width: 50px;
		height: 5px;
		background-color: #f1f1f1;
		border-radius: 2px;
	}

	.rotate {
		position: absolute;
		transform: rotate(90deg);
	}

	.icon-del-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 3px;
		right: 3px;
		height: 26px;
		width: 26px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
		transform: rotate(-45deg);
	}

	.icon-del {
		width: 15px;
		height: 2px;
		background-color: #fff;
		border-radius: 2px;
	}
</style>